<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			html,body{
				height: 100%;/*这里的html的高度继承自哪里？*/
				background-color: cornflowerblue;
				margin: 0;
				/*overflow: hidden;*/
			}
			.box1{
				height: 2000px;
				width: 200px;
				background-color: pink;
				position: relative;
			}
			.box1 img{
				position: absolute;
				animation: flash 10s infinite linear;
			}
			@keyframes flash{
				0%{
					top: 20px;
					left: 20px;
					opacity: 1;
				}
				8%{
					top: 20px;
					left: 20px;
					opacity: 0;
				}
				16%{
					top: 20px;
					left: 20px;
					opacity: 1;
				}
				25%{
					top: 200px;
					left: 200px;
					opacity: 1;
				}
				33%{
					top: 200px;
					left: 200px;
					opacity: 0;
				}
				41%{
					top: 200px;
					left: 200px;
					opacity: 1;
				}
				50%{
					opacity: 1;
					top: 110px;
					left: 530px;
				}
				58%{
					opacity: 0;
					top: 110px;
					left: 530px;
				}
				66%{
					opacity: 1;
					top: 110px;
					left: 530px;
				}
				75%{
					opacity: 1;
					top: 343px;
					left: 122px;
				}
				83%{
					opacity: 0;
					top: 343px;
					left: 122px;
				}
				91%{
					opacity: 0;
					top: 343px;
					left: 122px;
				}
				100%{
					top: 20px;
					left: 20px;
					opacity: 1;
				}
			}
		</style>
	</head>
	<body onload="goodbye()" onbeforeunload="return '刀下留页'">
		<div class="box1">
			<img src="img/pointer.png" id="img" onclick="reload()"/>
		</div>
		
		<script>
			function beforeunload(){
				return '别点！！！'
			}
			function reload(){
				location.reload()
			}
			function goodbye(){
				alert("bye bye")
			}
			fn();
			function fn(){
				var img = document.getElementById("img");
				var i = 1;
				var timer = setInterval(function(i){//这里，实际上setInterval内部调用函数的时候没有传入i，所以undefined
					if(i >= 5){
						i = 1;
					};
//					img.classList.add('cur' + i);
					console.log(i);
					i++;
				}, 3000);
				
				
				function mn(i){
					
				}
			}
		</script>
	</body>
</html>
